<template>
    <div class="header">
        <div class="header-left iconfont back-icon">&#xe624;</div>
        <div class="header-logo">{{title}}</div>
        <div class="header-right iconfont">&#xe632;</div>
    </div>
</template>
<script>
export default {
    name: 'Header',
    props: {
        title: String,
        default: ''
    }
}
</script>
<style scoped lang="stylus">
    @import '~styles/varibles.styl'
    .header
        position: fixed
        display: flex
        padding: 0.3rem 0.1rem
        width: 100%
        top: 0
        font-size: .4rem
        border-bottom: 1px solis #ccc 
        box-sizing: border-box
        background: $topBgColor
        text-align: center
        color: #666
        z-index: 10000
        &:after
            content: ''
            display: block
            position: absolute
            left: 0
            right:0
            bottom: 0
            width: 100%
            height:1px
            border-top:1px solid #e5e5e5
            transform: scaleY(.5)
        .header-left,.header-right
            width: .63rem
        .header-logo
            flex: 1
            
      
</style>


